<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        accent: '#10b981',
                        danger: '#ef4444',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">
    <!-- 登录卡片 -->
    <div class="w-full max-w-md">
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden transform transition-custom hover:shadow-2xl">
            <!-- 卡片头部 -->
            <div class="bg-primary p-6 text-center">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white text-shadow">用户登录</h2>
                <p class="text-blue-100 mt-1">请输入您的账号信息</p>
            </div>
            
            <!-- 登录表单 -->
            <div class="p-6 md:p-8">
                <form id="loginForm" class="space-y-5">
                    <!-- 用户名输入 -->
                    <div class="space-y-2">
                        <label for="username" class="block text-sm font-medium text-secondary">
                            <i class="fa fa-user-circle mr-1"></i>用户名
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                <i class="fa fa-user"></i>
                            </div>
                            <input type="text" id="username" name="username" 
                                class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-custom outline-none"
                                placeholder="请输入用户名" required>
                            <div class="hidden absolute inset-y-0 right-0 pr-3 flex items-center text-accent">
                                <i class="fa fa-check-circle"></i>
                            </div>
                        </div>
                        <p class="hidden text-danger text-xs mt-1"><i class="fa fa-exclamation-circle mr-1"></i>请输入用户名</p>
                    </div>
                    
                    <!-- 密码输入 -->
                    <div class="space-y-2">
                        <label for="password" class="block text-sm font-medium text-secondary">
                            <i class="fa fa-lock mr-1"></i>密码
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                <i class="fa fa-key"></i>
                            </div>
                            <input type="password" id="password" name="password" 
                                class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-custom outline-none"
                                placeholder="请输入密码" required>
                            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-primary transition-custom">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                        <p class="hidden text-danger text-xs mt-1"><i class="fa fa-exclamation-circle mr-1"></i>请输入密码</p>
                    </div>
                    
                    <!-- 记住密码和忘记密码 -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember" name="remember" type="checkbox" 
                                class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded transition-custom">
                            <label for="remember" class="ml-2 block text-sm text-secondary">
                                记住我
                            </label>
                        </div>

                    </div>
                    
                    <!-- 登录按钮 -->
                    <button type="submit" 
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2">
                        <i class="fa fa-sign-in mr-2"></i>登录
                    </button>
                </form>
            </div>
        </div>
        
        <!-- 页脚 -->
        <p class="text-center text-xs text-gray-500 mt-6">
            &copy; 2025 系统登录平台 - 版权所有
        </p>
    </div>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            const loginForm = document.getElementById('loginForm');
            const usernameInput = document.getElementById('username');
            const passwordInput = document.getElementById('password');
            const togglePassword = document.getElementById('togglePassword');
            
            // 密码可见性切换
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                
                // 切换图标
                this.querySelector('i').classList.toggle('fa-eye');
                this.querySelector('i').classList.toggle('fa-eye-slash');
            });
            
            // 表单验证
            loginForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                let isValid = true;
                
                // 验证用户名
                if (!usernameInput.value.trim()) {
                    showError(usernameInput, '请输入用户名');
                    isValid = false;
                } else {
                    showSuccess(usernameInput);
                }
                
                // 验证密码
                if (!passwordInput.value.trim()) {
                    showError(passwordInput, '请输入密码');
                    isValid = false;
                } else {
                    showSuccess(passwordInput);
                }
                
                // 如果验证通过，可以在这里添加登录逻辑
                if (isValid) {
                    const submitButton = loginForm.querySelector('button[type="submit"]');
                    const originalText = submitButton.innerHTML;
                    
                    // 显示加载状态
                    submitButton.disabled = true;
                    submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>登录中...';
                    
                    try {
                        // 真实调用后端登录接口
                        const response = await fetch('/api/storage/login', { // 假设后端登录接口为 /api/login
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                username: usernameInput.value.trim(),
                                password: passwordInput.value.trim()
                            })
                        });

                        if (!response.ok) {
                            const errorData = await response.json().catch(() => null)
                            throw new Error(errorData?.message || `登录失败（状态码：${response.status}）`);
                        }
      
                        const data = await response.json();
                        if (data.success) {
                        // 存储Token和正确的过期时间（后端返回的expiresIn是秒，转换为毫秒）
                        const expirationTime = new Date().getTime() + data.expiresIn * 1000;
                        localStorage.setItem('token', data.token);
                        localStorage.setItem('tokenExpiration', expirationTime.toString());
                        // 取消注释，实现自动跳转
                        window.location.href = 'dashboard.html'; 
                        } else {
                            throw new Error(data.message || '登录失败');
                        }
                      } catch (err) {
                        alert('登录失败：' + err.message);
                      } finally {
                        // 恢复按钮状态
                        submitButton.innerHTML = originalText;
                        submitButton.disabled = false;
                        }
                    }
                });
            
            // 输入框获得/失去焦点时的验证
            [usernameInput, passwordInput].forEach(input => {
                input.addEventListener('blur', function() {
                    if (!this.value.trim()) {
                        showError(this, this.id === 'username' ? '请输入用户名' : '请输入密码');
                    } else {
                        showSuccess(this);
                    }
                });
                
                input.addEventListener('focus', function() {
                    clearError(this);
                });
            });
            
            // 显示错误信息
            function showError(input, message) {
                const formGroup = input.closest('div.space-y-2');
                const errorElement = formGroup.querySelector('p.text-danger');
                const successIcon = input.parentElement.querySelector('div.text-accent');
                
                input.classList.add('border-danger');
                input.classList.remove('border-accent', 'focus:border-primary');
                
                if (successIcon) successIcon.classList.add('hidden');
                if (errorElement) {
                    errorElement.textContent = message;
                    errorElement.classList.remove('hidden');
                }
            }
            
            // 显示成功状态
            function showSuccess(input) {
                const formGroup = input.closest('div.space-y-2');
                const errorElement = formGroup.querySelector('p.text-danger');
                const successIcon = input.parentElement.querySelector('div.text-accent');
                
                input.classList.remove('border-danger');
                input.classList.add('border-accent');
                
                if (errorElement) errorElement.classList.add('hidden');
                if (successIcon) successIcon.classList.remove('hidden');
            }
            
            // 清除错误状态
            function clearError(input) {
                const formGroup = input.closest('div.space-y-2');
                const errorElement = formGroup.querySelector('p.text-danger');
                const successIcon = input.parentElement.querySelector('div.text-accent');
                
                input.classList.remove('border-danger', 'border-accent');
                input.classList.add('focus:border-primary');
                
                if (errorElement) errorElement.classList.add('hidden');
                if (successIcon) successIcon.classList.add('hidden');
            }
        });
    </script>
</body>
</html>
